<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card>
        <!-- tabs标签页组件
          v-model 关联的是 每一个tab面板的name值
          tab-click自定义事件 点击tab切换的时候会触发这个事件,
          事件中有两个参数 参数1是被激活的面板组件
          参数2是一个事件对象
         -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- pane label是tab的标题  pane面板中间是展示的内容 -->
          <el-tab-pane label="角色管理" name="roles">
            <!-- 添加角色按钮 -->
            <el-button style="margin: 15px 0" type="primary" icon="el-icon-plus" size="small" @click="dialogVisible = true">新增角色</el-button>
            <!-- 展示数据的表格
            data表格的数据源
            border 边框属性  border 等同于 :border="true"
            stripe 斑马纹 隔行变色
            -->
            <el-table v-loading="loading" :data="list" border stripe>
              <!--
                prop是要渲染的字段名
                label是表格的标题
                type="index"是设置索引列的
              -->
              <el-table-column label="序号" type="index" width="100" :index="indexMethod" />
              <el-table-column prop="name" label="角色名称" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作">
                <!-- 作用域插槽中有四个字段
                 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
                 -->
                <template #default="{row}">
                  <el-button type="success" size="small" @click="showRights(row.id)">分配权限</el-button>
                  <el-button type="primary" size="small">编辑</el-button>
                  <el-button type="danger" size="small" @click="del(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件-->
            <!--
              current-page 当前页码 page
              :page-sizes="[1, 2, 3, 4]" // 选择每页展示多少条的下拉选择框
              :page-size="100" 每页展示的条数 pagesize
              :layout 展示分页的布局结构
              :total 数据总条数
              @size-change 每页条数发生变化的时候会触发这个事件 参数中可以获取到最新的每页条数
              @current-change 页码发生变化的时候会触发这个事件  参数中可以获取到最新的页码
             -->
            <el-pagination
              style="margin-top:20px"
              :current-page="page"
              :page-sizes="[1, 2, 3, 4]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="company">
            <!-- 警告信息 -->
            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              show-icon
              :closable="false"
            />
            <!-- 表单 -->
            <el-form label-width="120px" style="margin-top:50px">
              <el-form-item label="公司名称">
                <el-input :value="companyInfo.name" disabled style="width:400px" />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input :value="companyInfo.companyAddress" disabled style="width:400px" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input :value="companyInfo.mailbox" disabled style="width:400px" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input :value="companyInfo.remarks" type="textarea" :rows="3" disabled style="width:400px" />
              </el-form-item>
            </el-form>
          </el-tab-pane></el-tabs>
        <!-- 添加/编辑角色对话框 -->
        <!-- 添加 -->
        <el-dialog
          title="添加/编辑角色"
          :visible.sync="dialogVisible"
          :before-close="closeDialog"
        >
          <el-form ref="formRef" :model="form" :rules="rules">
            <el-form-item prop="name" label="角色名称" label-width="80px">
              <el-input v-model="form.name" placeholder="请输入角色名称" />
            </el-form-item>
            <el-form-item prop="description" label="角色描述" label-width="80px">
              <el-input v-model="form.description" placeholder="请输入角色描述" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="clickSubmit">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 分配权限 -->
        <el-dialog :visible="rightsDialog" title="分配权限" @close="closeRights">
          <!-- show-checkbox 展示复选框 -->
          <!-- check-strictly 开启父子复选框不关联 -->
          <!-- node-key="id" 如果需要通过 key 来获取或设置，则必须设置node-key -->
          <el-tree
            ref="treeRef"
            :data="treeList"
            default-expand-all
            :props="{label: 'name'}"
            show-checkbox
            check-strictly
            node-key="id"
          />
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeRights">取 消</el-button>
            <el-button type="primary" @click="saveRole">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>

  </div>
</template>

<script>
import { reqGetRoles, reqDeleteRole, reqAddRole, reqGetRoleDetail, reqAssignPerm } from '@/api/setting'
import { reqGetPermissionList } from '@/api/permission'
import { reqGetCompanyById } from '@/api/company'
import { tranListToTreeData } from '@/utils/index'
export default {
  name: 'Settings',
  data() {
    return {
      activeName: 'roles',
      list: [], // 表格数据
      page: 1, // 页码
      pagesize: 2, // 每页条数
      total: 0, // 总数据条数
      loading: false,
      dialogVisible: false, // 控制对话框组件的布尔值
      form: {
        name: '', // 角色名称
        description: '' // 角色描述
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: ['blur', 'change'] }
        ],
        description: [
          { required: true, message: '请输入角色描述', trigger: ['blur', 'change'] }
        ]
      },
      companyInfo: {}, // 公司信息
      rightsDialog: false, // 分配权限的布尔值
      treeList: [],
      roleId: ''
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    // tabs标签页切换的时候触发的方法
    async handleClick(tab, event) {
      // console.log(tab, event)
      // 如果切换的面板的组件中的name属性等于 company 才说明进入到了第二个面板
      if (tab.name === 'company') {
        // console.log('获取公司信息')
        const { data } = await reqGetCompanyById(this.$store.state.user.userInfo.companyId)
        // console.log(res)
        this.companyInfo = data
      }
    },
    // 获取所有角色列表
    async getRolesList() {
      this.loading = true // 开启loading
      const { data: { rows, total }} = await reqGetRoles(this.page, this.pagesize)
      // console.log(res)
      this.list = rows
      this.total = total
      this.loading = false // 关闭loading
    },
    // 每页条数发生变化的时候会触发这个事件 参数中可以获取到最新的每页条数
    handleSizeChange(newpagesize) {
      // console.log(`最新的每页条数${newpagesize}`)
      // 将最新的每页条数赋值
      this.pagesize = newpagesize
      // 重置当前页 --- 规避bug 更新数据的时候page手动重置为1
      this.page = 1
      // 重新获取数据
      this.getRolesList()
    },
    // 页码发生变化的时候会触发这个事件  参数中可以获取到最新的页码
    handleCurrentChange(newpage) {
      // console.log(`最新的页码${newpage}`)
      // 将最新的页码赋值
      this.page = newpage
      // 重新获取数据
      this.getRolesList()
    },
    // 自定义索引
    indexMethod(index) { // index参数默认是从0开始的
      // console.log(index)
      //  page 1 pagesize 是2   1 * 2 + 1 = 3
      // return index + 1 + this.page * this.pagesize
      // page 1 pagesize 是2   0 + 1
      return index + 1 + (this.page - 1) * this.pagesize
    },
    // 删除角色
    async del(row) {
      // console.log(row.id)
      // 1. 确认消息框
      const str = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {})
      // console.log(res) // 确认是 confirm  取消是undefined
      if (str !== 'confirm') return this.$message.info('已取消操作')
      // 2. 发送请求
      const { message } = await reqDeleteRole(row.id) // 携带角色id
      // 3. 提示用户
      this.$message.success(message)
      // 4. 重新渲染页面
      if (this.list.length === 1 && this.page > 1) {
        this.page--
      }
      this.getRolesList()
    },
    // 关闭对话的方法
    closeDialog() {
      // 重置表单和校验规则
      this.$refs.formRef.resetFields()
      this.dialogVisible = false
    },
    // 提交添加/编辑
    clickSubmit() {
      this.$refs.formRef.validate(async boo => {
        if (!boo) return this.$message.warning('请填写完整要添加的信息')
        if (this.form.xxx) {
        // 编辑的业务
        } else {
          // 1. 发送请求
          const { message } = await reqAddRole(this.form)
          // 2. 看结果
          // 3. 提示
          this.$message.success(message)
          // 4. 关闭对话框
          this.dialogVisible = false
          // 5. 重绘
          this.getRolesList()
        }
      })
    },
    // 分配权限
    async showRights(id) {
      this.rightsDialog = true
      this.roleId = id // 点击角色的id
      const { data } = await reqGetPermissionList()
      const { data: { permIds }} = await reqGetRoleDetail(id)
      // console.log(permIds) // 当前角色已有的权限 是一个数组
      this.treeList = tranListToTreeData(data, '0')
      // 给树形控件选中已有的权限 permIds
      // setCheckedKeys(数组) 设置树形控件选中的节点
      this.$refs.treeRef.setCheckedKeys(permIds)
    },
    closeRights() {
      this.rightsDialog = false
    },
    // 点击为角色分配权限
    async saveRole() {
      console.log(this.$refs.treeRef.getCheckedKeys()) // 获取树形控件选中的复选框节点 数组
      await reqAssignPerm({
        id: this.roleId,
        permIds: this.$refs.treeRef.getCheckedKeys()
      })
      this.$message.success('更新成功')
      this.closeRights()
    }
  }
}
</script>

<style>

</style>
